<template>
	<view class="container" >
		<!-- <view style="height: 550rpx;"></view> -->
		<!-- :style="{backgroundImage: 'url('+ $util.img('image/medical_doctor_bg.png') +')'}" -->
		<view class="topimg">
			<image :src="$util.img('image/medical_doctor_top.png')" mode=""></image>
		</view>
		<!-- <scroll-view scroll-y="true" class="scroll" > -->
			<view class="scroll">
			<view class="doctor" v-for="(item,index) in list" :key="index">
				<view class="zishen">
					<image :src="$util.img('image/zishen.png')" mode=""></image>
					{{item.label}}
				</view>
				<view class="info flex-y-center m-b-24">
					<image :src="$util.img(item.avatar)" mode="aspectFill" class="avatar" lazy-load></image>
					<view>
						<view class="text-bold">
							<text class="font-30 m-r-12">{{item.realname}}</text>
							<text class="color-bb">{{item.level}}</text>
						</view>
						<view class="font-24">
							<text>{{item.subject}}</text>
							<text class="c-78"> 丨 {{item.hospital}}</text>
						</view>
					</view>
				</view>
				<view class="desc">
					<image :src="$util.img('image/desc.png')" mode=""></image>
					<text class="color-bb" style="vertical-align: baseline;">擅长方向：</text>
					 {{item.good_at}}
				</view>
			</view>
			</view>
		<!-- </scroll-view> -->
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				page: 1,
				list: [],

			}
		},
		onLoad() {
			this.getList()
		},
		methods: {
			getList() {
				this.$api.sendRequest({
			      url: "/api/health/expert",
			      data: {},
			      success: res => {
			        if(res.code == 0) {
						if(this.page == 1) this.list = []
						this.list = [...this.list, ...res.data]

						// this.list.forEach(item => {
						// 	item.goods_label = item.goods_label.split(',')
						// });
			        } 
			      }
			    })
			},
		}
	}
</script>

<style lang="scss" scoped>
.container {
	width: 100vw;
	// height: 100vh;
	// background-position: 30% 30%;
	// background-repeat: no-repeat;
	// background-size: cover;
	padding-bottom: 0!important;
	background: linear-gradient(180deg, #ECD6B0 0%, #DBA76A 100%);
}
.doctor {
	position: relative;
	margin: 0 24rpx 24rpx;
	background: #fff;
	border-radius: 20rpx;
	padding: 30rpx;
	.zishen {
		position: absolute;
		top: 0;
		right: 0;
		display: flex;
		align-items: center;
		background: linear-gradient(180deg, #fad8b0 0%, #ffc581 100%);
		border-radius: 0 20rpx 0 30rpx;
		font-size: 24rpx;
		padding: 6rpx 20rpx;
		color: #9E662C;
		font-weight: bold;
		image {
			width: 30rpx;
			height: 30rpx;
		}
	}
	.avatar {
		width: 106rpx;
		height: 106rpx;
		border-radius: 50%;
		margin-right: 20rpx;
	}
	.desc {
		background: #FFF6E9;
		border-radius: 20rpx;
		padding: 20rpx 24rpx;
		font-size: 24rpx;
		color: #777D94;
		image {
			width: 28rpx;
			height: 28rpx;
			margin-right: 14rpx;
		}
	}
}
.color-bb {
	color: #BB8638;
}
.scroll {
	// height: calc(100vh - 565rpx);
	margin-top: -160rpx;
}
.topimg {
	image {
		width: 100%;
		height: 725rpx;
	}
}
</style>
